<template lang="">
    <div>
        <div class="box-center transfer">
            <el-transfer v-model="classId" :titles="['可选班级','已选班级']" :props="{key:'classId',label:'className'}"
                :data="$store.state.form.class" :button-texts="['弃选','选中']" filterable></el-transfer>
        </div>
        <div class="button-group-emit">
            <el-button type="primary" @click="nextStep">下一步</el-button>
        </div>
    </div>
</template>
<script>
    import { mapActions } from 'vuex'
    export default {
        name: 'Step3',
        data() {
            return {
                classId: []
            };
        },
        methods: {
            ...mapActions(['getClass']),
            nextStep() {
                if (this.classId.length == 0) {
                    this.$message({
                        message: '请先选择班级',
                        type: 'warning'
                    })
                } else {
                    console.log(this.classId);
                    this.$store.commit('nextStep', 3)
                    this.$router.replace('step4')
                    this.$store.commit('setUserSelected', { key: 'class', arr: this.classId })
                }

            }
        },
        mounted() {
            let departments = this.$store.state.userSelected.department
            let majors = this.$store.state.userSelected.major
            let grades = this.$store.state.userSelected.grade
            let obj = {}
            for (let i = 0; i < departments.length; i++) {
                for (let j = 0; j < grades.length; j++) {
                    for (let k = 0; k < majors.length; k++) {
                        obj = {
                            departmentId: departments[i],
                            gradeId: grades[j],
                            majorId: majors[k]
                        }
                        this.getClass(obj)
                    }
                }
            }

        },
    }
</script>
<style scoped>
    .transfer {
        width: 650px;
    }

    .button-group-emit {
        margin-top: 10px;
    }
</style>